<template>
	<view>
		<view class="content">
			<image class="hotActivity" mode="widthFix" src="../../static/hotActivity.jpg"
				@click="goto('./hotActivity/hotActivity')"></image>
			<!-- 列表 -->
			<!-- uni-segmented-control 分段器 -->
			<uni-segmented-control :current="current" :values="items" active-color="#1CA967" class="title"
				style-type="text" @clickItem="onClickItem" />

			<!-- 全部内容 -->
			<view v-if="current === 0">
				<uni-list v-for="(item) in article" style="width: 100%;">
					<!-- 在uni-list v-for="item in article" -->
					<uni-list-item class="list" clickable title=""
						@click="goto('./topicDetails/topicDetails?id='+item.id)">
						<template v-slot:header>
							<view class="listContainer">
								<text class="listContainer-title">{{ item.name }}</text>
								<text class="listContainer-content" v-html="item.content"></text>
								<text class="listContainer-source">{{ item.author }}</text>
							</view>
							<image :src="getImage(item.images)" class="image" mode="aspectFill"></image>
						</template>
					</uni-list-item>

				</uni-list>

				<u-loadmore :status="status" loading-text="加载中" nomore-text="没有更多了"></u-loadmore>
			</view>


			<!-- 新闻咨询 -->
			<view v-if="current === 1">
				<uni-list v-for="(item) in articleTypes" style="width: 100%;">
					<uni-list-item class="list" clickable title=""
						@click="goto('./topicDetails/topicDetails?id='+item.id)">
						<template v-slot:header>
							<view class="listContainer">
								<text class="listContainer-title">{{ item.name }}</text>
								<text class="listContainer-content" v-html="item.content"></text>
								<text class="listContainer-source">{{ item.author }}</text>
							</view>
							<image :src="getImage(item.images)" class="image" mode="aspectFill"></image>
						</template>
					</uni-list-item>
				</uni-list>
				<u-loadmore :status="status" loading-text="加载中" nomore-text="没有更多了"></u-loadmore>
			</view>
			<!-- 热门话题 -->
			<view v-if="current === 2">
				<uni-list v-for="(item) in articleTypes" style="width: 100%;">
					<uni-list-item class="list" clickable title=""
						@click="goto('./topicDetails/topicDetails?id='+item.id)">
						<template v-slot:header>
							<view class="listContainer">
								<text class="listContainer-title">{{ item.name }}</text>
								<text class="listContainer-content" v-html="item.content"></text>
								<text class="listContainer-source">{{ item.author }}</text>
							</view>
							<image :src="getImage(item.images)" class="image" mode="aspectFill"></image>
						</template>
					</uni-list-item>
				</uni-list>
				<u-loadmore :status="status" loading-text="加载中" nomore-text="没有更多了"></u-loadmore>
			</view>
			<view v-if="current === 3">
				<uni-list v-for="(item) in articleTypes" style="width: 100%;">
					<uni-list-item class="list" clickable title=""
						@click="goto('./topicDetails/topicDetails?id='+item.id)">
						<template v-slot:header>
							<view class="listContainer">
								<text class="listContainer-title">{{ item.name }}</text>
								<text class="listContainer-content" v-html="item.content"></text>
								<text class="listContainer-source">{{ item.author }}</text>
							</view>
							<image :src="getImage(item.images)" class="image" mode="aspectFill"></image>
						</template>
					</uni-list-item>
				</uni-list>
				<u-loadmore :status="status" loading-text="加载中" nomore-text="没有更多了"></u-loadmore>
			</view>
		</view>
		<!-- 占位置，把被导航栏的遮住的文章列表空间留出来 -->
		<view style="height: 130rpx;"></view>
		<Tabbar style="position: fixed;" cureentPage='finding'></Tabbar>
	</view>
</template>

<script>
	import findingApi from '../../common/FindingService/FindingApi';
	import Tabbar from '../../components/common/Tabbar.vue'

	export default {
		data() {
			return {
				items: ['全部内容', '新闻咨询', '热门话题', '回收攻略'],
				current: 0,
				// 传文章类型id到文章详情页
				categoryId: '0',
				// 存储全部内容文章
				article: [],
				// 存储不同类型的文章
				articleTypes: [],
				status: 'loadmore',
				cureentPage: 1,
				pageSize: 5,
			}
		},
		components: {
			Tabbar
		},
		onLoad() {
			this.listArticle()

		},
		methods: {
			// 从对象存储中获取图片
			getImage(image) {
				return `http://43.136.172.73/api/v1/file/download?fileName=${image}`
			},

			onReachBottom() {
				if (this.status != 'nomore') {
					this.pageSize += 5;
					if (this.categoryId == 0) {
						uni.request({
							url: 'http://43.136.172.73/api/v1/article/list',
							data: {
								currentPage: this.cureentPage,
								pageSize: this.pageSize
							},
							header: {
								"Authorization": "sfsdf" //自定义请求头信息
							},
							success: (res) => {
								console.log('查询全部文章内容3', res.data.data);
								this.article = res.data.data.records
								if (res.data.data.size < this.pageSize) {
									// this.pageSize = res.data.data.size;
									this.status = 'nomore';
								}
							}
						});
					} else {
						this.pageSize=5
						this.listTypesArticle(this.categoryId)
					}
					this.status = 'loadmore';
				}
			},
			// 点击不同类型的文章
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
					this.categoryId = String(e.currentIndex);
					console.log('类型id',this.categoryId)
					this.listTypesArticle(this.categoryId)
				}
			},

			goto(url) {
				uni.navigateTo({
					url
				})
			},

			// 显示发现页(全部内容)的文章列表
			listArticle() {
				uni.request({
					url: 'http://43.136.172.73/api/v1/article/list',
					data: {
						currentPage: this.cureentPage,
						pageSize: this.pageSize
					},
					header: {
						"Authorization": "sfsdf" //自定义请求头信息
					},
					success: (res) => {
						console.log('查询发现页全部内容：',res.data);
						this.article = res.data.data.records
						this.text = 'request success';
					}
				});
			},


			// 点击查询发现页不同类型的文章列表,例如新闻咨询
			listTypesArticle(categoryId) {
				uni.request({
					url: 'http://43.136.172.73/api/v1/article/category/list',
					data: {
						number: this.pageSize,
						categoryId: categoryId
					},
					header: {
						"Authorization": "sfsdf" //自定义请求头信息
					},
					success: (res) => {
						console.log('22222',this.pageSize,this.categoryId)
						console.log('查询到不同类型的文章', res)
						this.articleTypes = res.data.data.records
						// 触底后判断是否还有数据,且没有数据后不在发请求
						if (res.data.data.size < this.pageSize) {
							this.status = 'nomore';
						}
					}
				});
			},
		},
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 20rpx;

		.hotActivity {
			width: 95%;
			margin-top: $uni-spacing-col-sm;
			border-radius: $uni-border-radius-lg*2;
			box-shadow: 3px 2px #eee;
		}

		.title {
			flex-direction: row;
			flex-wrap: nowrap;
			width: 100%;
			margin-top: $uni-spacing-col-base;

			.titleList {
				width: 21%;
				margin: $uni-spacing-col-base 0 0 $uni-spacing-col-base;
				border-bottom: 3px solid transparent;

				/deep/ .uni-list-item__container {
					padding: $uni-spacing-row-sm;

					.uni-list-item__content {
						padding-right: 0;
						text-align: center;
					}
				}
			}

			.active {
				border-bottom-color: green;
			}
		}

		.list {
			width: 90vw;
			border: 1px solid $uni-text-color-disable;
			border-radius: $uni-border-radius-lg;
			margin: $uni-spacing-col-lg $uni-spacing-col-lg;

			/deep/ .uni-list-item__container {
				padding: $uni-spacing-col-base $uni-spacing-col-sm;
			}

			.listContainer {
				width: 60%;
				display: flex;
				flex-direction: column;
				margin-right: $uni-spacing-row-base;
				margin-left: $uni-spacing-row-base;

				.listContainer-title {
					font-weight: bold;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;

				}

				.listContainer-content {
					font-size: $uni-font-size-sm;
					color: $uni-text-color-placeholder;
					margin: $uni-spacing-col-base 0;
					@include ellipsis-2;

				}

				.listContainer-source {
					font-size: $uni-font-size-base;
					color: $uni-text-color-placeholder;
				}
			}

			.image {
				width: 40%;
				height: auto;
				margin-right: $uni-spacing-row-sm;
				border-radius: $uni-border-radius-lg;
			}

			/deep/ .uni-list-item__content {
				padding: 0;
			}
		}
	}
</style>